<template>
  <div  style="width: 100%;height: 100%"
        v-loading="is_loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
  >



    <div class="container">
        <div class="top">
          <img src="https://static.shikee.tv/www/source/img/logo.png" alt="">
        </div>
        <div class="main">
          <div class="ant-form">
              <el-input v-model="mobile" placeholder="请输入账号"></el-input>

              <el-input v-model="password" placeholder="请输入密码" type="password"></el-input>

               <el-button type="primary" style="width: 100%" @click="login()">登录</el-button>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      baseurl:this.$moment.config.baseurl,
      is_loading:false,
      mobile: '',
      password:''
    }
  },
  methods: {
    login() {

      var data ={};
      if(this.mobile==''||this.password==''){
          this.$message({
            message: '账号、密码不能为空',
            type: 'error'
          });

          return;
      }
      data.mobile   = this.mobile;
      data.password = this.password;
      this.is_loading=true;


      this.$http.post(this.baseurl+'login/post' ,data,{credentials : true,emulateJSON:true}).then(function(res){

        if(res==null){
            return;

        }

        if(res.status==200){

          if(res.body.code==200){

            this.$router.push({ path: '/'})

          }else{
              this.$message({
                message: res.body.message,
                type: 'error'
              });
          }

        }else {
          this.$message({
            message: '服务器请求失败，请稍候再试！',
            type: 'error'
          });
        }

        this.is_loading=false;


      });

    },
  },

     mounted: function () {

        this.$moment.initlogin(this);
     }


}
</script>

<style>
  html , body{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  .container {
    background: #f0f2f5;
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    padding: 110px 0 144px 0;
    position: relative;

  }
  .main{
    width: 368px;
    margin: 0 auto;
  }

  .ant-form {
    font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .el-input,el-button{
    border-bottom: 0;
    margin-bottom: 24px;
    text-align: center;

  }
  .top {
    text-align: center;
    margin-bottom: 50px;
  }
</style>
